<script setup lang="ts">
import { ExamApi } from '@/apis'
import { useDict, useRequest } from '@/hooks'

defineOptions({
  name: 'ExamScoreTable',
})
const props = withDefaults(defineProps<Props>(), {
  examId: '',
})

interface Props {
  examId: string
}

const {
  loading,
  response: dataList,
  refresh: search,
} = useRequest(() => ExamApi.getScoreTable(props.examId))

const questionModules = useDict('QuestionModuleEnum')
</script>

<template>
  <ProTable
    row-key="id"
    :data="dataList?.examRecords"
    :loading="loading"
    :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
    :pagination="false"
    :bordered="{ headerCell: true }"
    @refresh="search"
  >
    <template #columns>
      <a-table-column key="rank" title="排名" data-index="rank" align="center" :width="66" />
      <a-table-column key="studentName" title="学生" data-index="studentName" align="center" :width="120" />
      <a-table-column key="className" title="班级" data-index="className" align="center" :width="330" />
      <a-table-column key="totalScore" title="得分" data-index="totalScore" align="center" :width="120" />
      <a-table-column v-for="sets in dataList?.questionSets" :key="sets.key" :title="sets.title" align="center">
        <a-table-column v-for="(question, index) in sets.questions" :key="question.id" :data-index="question.id" align="center" :width="120">
          <template #title>
            <div>
              {{ index + 1 }}.{{ questionModules[question.questionModule].label }}
            </div>
            <div class="text-align-center text-12px">
              ({{ question.score }}分)
            </div>
          </template>
          <template #cell="{ record }">
            {{ record.scoreItemMap[question.id].score }}
          </template>
        </a-table-column>
      </a-table-column>
    </template>
  </ProTable>
</template>

<style lang="less" scoped></style>
